﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>固定资产使用登记</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.18/dist/css/layui.min.css">
    <style>
        .layui-table-view {
            margin: 0;
        }

        .search-form {
            background: #f8f8f8;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .user-role-info {
            background: #e8f4ff;
            padding: 8px 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            border-left: 4px solid #1890ff;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md12">
                <!-- 用户角色信息显示 -->
                <div class="user-role-info">
                    <i class="layui-icon layui-icon-user"></i>
                    当前用户权限:
                    <span id="currentUserRole">
                        @if (ViewBag.IsAdmin)
                        {
                            <span class="layui-badge layui-bg-red">管理员</span>
                        }
                        else
                        {
                            <span class="layui-badge layui-bg-blue">普通员工</span>
                        }
                    </span>
                </div>

                <!-- 搜索区域 - 删除使用状态，只保留资产编号搜索 -->
                <div class="search-form">
                    <form class="layui-form" id="searchForm">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">资产编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="assetDetailNum" autocomplete="off" class="layui-input" placeholder="请输入资产编号">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-normal" id="searchBtn">
                                    <i class="layui-icon">&#xe615;</i>搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 数据表格 -->
                <table class="layui-hide" id="assetUseTable" lay-filter="assetUseTable"></table>
            </div>
        </div>
    </div>

    <!-- 加载 Layui -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="~/Scripts/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;

            // 从ViewBag获取管理员状态
            var isAdmin = @(ViewBag.IsAdmin.ToString().ToLower());

            console.log('当前用户权限:', isAdmin ? '管理员' : '普通员工');

            // 初始化表格
            var tableIns = table.render({
                elem: '#assetUseTable',
                url: '/AssetUse/GetAssetUseList',
                method: 'post',
                page: true,
                limits: [10, 20, 50, 100],
                limit: 10,
                cols: [[
                    { type: 'numbers', title: '编号' },
                    { field: 'AssetDetailNum', title: '资产编号', width: 150 },
                    { field: 'AssetName', title: '资产名称', width: 150 },
                    { field: 'EmpolyName', title: '使用员工', width: 120 },
                    { field: 'AreaName', title: '使用区域', width: 120 },
                    { field: 'AssetNum', title: '使用数量', width: 100 },
                    {
                        field: 'AssetDetailRecordUseDate',
                        title: '使用日期',
                        width: 120,
                        templet: function(d) {
                            if (!d.AssetDetailRecordUseDate) return '';
                            var dateStr = d.AssetDetailRecordUseDate.toString();
                            if (dateStr.includes('/Date(')) {
                                return new Date(parseInt(dateStr.replace(/\/Date\((\d+)\)\//, '$1'))).toLocaleDateString();
                            } else {
                                return new Date(dateStr).toLocaleDateString();
                            }
                        }
                    },
                    {
                        field: 'AssetDetailRecordReturnDate',
                        title: '归还日期',
                        width: 120,
                        templet: function(d) {
                            if (!d.AssetDetailRecordReturnDate) return '-';
                            var dateStr = d.AssetDetailRecordReturnDate.toString();
                            if (dateStr.includes('/Date(')) {
                                return new Date(parseInt(dateStr.replace(/\/Date\((\d+)\)\//, '$1'))).toLocaleDateString();
                            } else {
                                return new Date(dateStr).toLocaleDateString();
                            }
                        }
                    },
                    { field: 'AssetDetailRecordReMark', title: '备注', width: 200 },
                    {
                        fixed: 'right',
                        title: '操作',
                        width: 100,
                        align: 'center',
                        toolbar: '#tableBar'
                    }
                ]],
                parseData: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                }
            });

            // 监听工具条
            table.on('tool(assetUseTable)', function (obj) {
                var data = obj.data;

                if (obj.event === 'return') {
                    layer.confirm('确定要归还该资产吗？', function (index) {
                        $.ajax({
                            url: '/AssetUse/ReturnAsset',
                            type: 'post',
                            data: { assetDetailRecordID: data.AssetDetailRecordID },
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg('归还成功');
                                    tableIns.reload();
                                } else {
                                    layer.msg(res.msg || '归还失败');
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error('归还请求失败:', error);
                                layer.msg('网络请求失败，请稍后重试');
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            // 搜索按钮点击事件
            $('#searchBtn').on('click', function () {
                var formData = $('#searchForm').serializeArray();
                var searchParams = {};
                $.each(formData, function () {
                    if (this.value) {
                        searchParams[this.name] = this.value;
                    }
                });

                tableIns.reload({
                    where: searchParams,
                    page: { curr: 1 }
                });
            });
        });
    </script>

    <!-- 表格操作列模板 -->
    <script type="text/html" id="tableBar">
        {{# if(d.CanReturn){ }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="return">归还</a>
        {{# } else { }}
        <span class="layui-badge layui-bg-gray">已归还</span>
        {{# } }}
    </script>
</body>
</html>